<template>
    <global-layout>
        <transition name="page-transition">
            <keep-alive v-if="keepAlive">
                <router-view/>
            </keep-alive>
            <router-view v-else/>
        </transition>
    </global-layout>
</template>

<script>
  import GlobalLayout from '@/components/page/GlobalLayout'

  export default {
    name: 'BasicLayout',
    components: {
      GlobalLayout
    },
    data() {
      return {}
    },
    computed: {
      keepAlive() {
        return this.$route.meta.keepAlive
      }
    },
    methods: {}
  }
</script>

<style lang="less">

    /*
   * The following styles are auto-applied to elements with
   * transition="page-transition" when their visibility is toggled
   * by Vue.js.
   *
   * You can easily play with the page transition by editing
   * these styles.
   */

    .page-transition-enter {
        opacity: 0;
    }

    .page-transition-leave-active {
        opacity: 0;
    }

    .page-transition-enter .page-transition-container,
    .page-transition-leave-active .page-transition-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
</style>
